import React,{Component} from 'react';
import {connect} from 'react-redux';
import {lookCmt,findNews} from './../action/comment';
import NavLink from './NavLink.js';

class CmtContext extends Component{

    componentWillMount(){
        let id=this.props.params.data;
        let params= {postId:id,page:1,limit:3};
        
        this.props.lookCmt(params);
        this.props.findNews(this.props.params.data);
    }
    changePage(e){
        let id=this.props.params.data;
        let page=e.currentTarget.getAttribute('data-page');
		let params= {postId:id,page:page,limit:3};
		this.props.lookCmt(params);
    }
    render(){
        const {comment,news} = this.props;
        var output = [];
        if(comment.length<=0){
            return <li>数据加载中...</li>
        }

        var output=[];
        var stars=[];
        var pages = 1;
        var outputPages=[];
        var cmt=comment.rows;
        pages=Math.ceil(comment.total/comment.limit);//分页
		for(let i=1;i<=pages;i++){
			outputPages.push(
				<li key={i}>
			        <a href="javascript:void(0)" data-page={i} onClick={(e)=>this.changePage(e)}>{i}
			        	<span className="sr-only"></span>
			        </a>
			    </li>
			)
		}

        
        for(var i=0;i<cmt.length;i++){
            stars=[];
            for(var j=0;j<cmt[i].rate;j++){
                stars.push(
                    <span className="glyphicon glyphicon-star" aria-hidden="true" key={j}></span>
                )
            }
            output.push(
                <div className="jumbotron" key={i} style={{padding:'10px'}}>
                    <p>用户&nbsp;{cmt[i].author}&nbsp;:</p><p>{cmt[i].comment}</p>
                    <p>评分：
                        <button type="button" className="btn btn-default btn-lg">
                            {stars}
                        </button>
                    </p>
                    <span>{cmt[i].date}</span>
                </div>
            )
        }


        return (
            <div>           
                <div className="row">
                    <div className="col-sm-12 blog-main" >
                        <div className="panel panel-primary" >
                            <div className="panel-heading" style={{background:'Dackblue'}}><h2>{news.title}</h2></div>
                            <div className="panel-body">
                                <div className="container">
                                    <div className="jumbotron"  >
                                        <p>摘要：{news.btitle}</p>
                                        <p></p>
                                        <p>{news.content}</p>
                                        <p></p>
                                        <p>作者：{news.author}</p>
                                        <p>时间：{news.date}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="panel panel-default" >
                    <div className="panel-heading" style={{background:'Dackblue',height:"20px"}}><h2>评论</h2></div>
                        <div className="container marketing">
                            {output}                           
                        </div>
                        <nav aria-label="..."><ul className="pagination">{outputPages}</ul></nav>
                    </div>
                </div>
                <NavLink to="/news"><button type="button" className="btn btn-lg btn-default"
                style={{marginBottom:"50px"}}>返&nbsp;&nbsp;回</button></NavLink>
            </div>
        )
    }
}

const getValue = (state)=>{
    console.log(state)
    return {
        comment:state.comment.comment,
        news:state.news.news
    }
}

const Comment = connect(getValue , {lookCmt,findNews})(CmtContext);

export default Comment;